<template>
  <d2-container>
    <template slot="header">
      <el-row>
        <el-col :span="12">
          <h2>菜类信息管理</h2>
        </el-col>
        <el-col :span="12" >
          <el-card style="width: 400px;float:right;">
            <el-row>
              <el-col :span="12">
                <p>今日推荐菜id号:{{todayDishes}}</p>
              </el-col>
              <el-col :span="12">
                <p>菜名：{{todayDishesName}}</p>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </template>



    <template>
<div style="width: 800px;">
  <el-row >
    <el-col :span="12">
      <el-card>
        <el-input v-model="newToday" placeholder="今日推荐修改--菜的编号" style="width: 70%"></el-input>
        <el-button @click="alterToday" style="margin-left: 20px;">修改</el-button>
      </el-card>
    </el-col>
    <el-col :span="12">

    </el-col>
  </el-row>

</div>

      <el-table
        :data="tableData"
        border
        style="width: 100%;margin-top: 20px;"
        :row-class-name="tableRowClassName">
        <el-table-column type="expand" >
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item>
                <h3>配料表</h3>
                <div v-for="item in props.row.dishesIngredients" :key="item.index">
                  <el-row style="width: 500px">
                    <el-col :span="18"><p>{{item.ingredientsName}}</p></el-col>
                    <el-col :span="3"><p>{{item.ingredientsNum}}</p></el-col>
                    <el-col :span="3"><p>{{item.ingredientsUnit}}</p></el-col>
                  </el-row>
                </div>

                <h3>步骤</h3>
                <div v-for="item in props.row.dishesStep" :key="item.index">
                  <el-row style="width: 800px">
                    <el-col :span="3"><p>第{{item.stepNum+1}}步</p></el-col>
                    <el-col :span="15"><p>{{item.stepContent}}</p></el-col>
                    <el-col :span="6">
                      <el-image style="width:120px;height: 120px;margin-top:20px;" :src="item.stepImg" fit="cover"></el-image>
                    </el-col>
                  </el-row>
                </div>

              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column
          prop="dishesId"
          label="唯一编号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="dishesImg"
          label="菜图"
          width="120">
          <template slot-scope="scope">
            <el-image style="width:60px;height: 60px" :src="scope.row.dishesImg" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="dishesName"
          label="菜名"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="dishesTag"
          label="标签"
          width="120">
        </el-table-column>
        <el-table-column
          prop="dishesTime"
          label="时间"
          width="200">
        </el-table-column>
        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

  </d2-container>
</template>

<script>
  import {getDishes,deleteDishes,getToday,setToday} from '@/api/user.js';
export default {
  name: 'page2',
  data() {
    return {
      tableData: [],
      todayDishes:0,
      todayDishesName:'',
      newToday:'',
    };
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      row.index=rowIndex
    },
    handleClick(row){
      const _this = this;
      deleteDishes(row.dishesId).then(resp=>{
        console.log(resp)
        _this.tableData=resp
        console.log(_this.tableData)
      })
    },
    alterToday(){
      this.$message({
        message: '修改已更改成功！(ง •̀_•́)ง',
        type: 'success'
      });
      setToday(1,this.newToday).then(resp=>{
        getToday().then(resp=>{
          this.todayDishes=resp[0].dishes.dishesId
          this.todayDishesName=resp[0].dishes.dishesName
        })
      })
    }
  },
  created() {
    const _this = this;
    getDishes().then(resp=>{
      console.log(resp)
      _this.tableData=resp
      console.log(_this.tableData)
    })
    getToday().then(resp=>{
      this.todayDishes=resp[0].dishes.dishesId
      this.todayDishesName=resp[0].dishes.dishesName
    })
  }
}
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 400px;
  }
</style>
